<template>
    <UxDialog title="Select produce" :visible="value" @show="onShow()" @close="onClose()" @scroll="onScroll($event)">
        <div class="scroll-list" v-loading="products.length <= 0 && loading">
            <ul>
                <li v-for="item in products" :key="item.id" @click="selectItem(item)">
                    <figure>
                        <img :src="$getImageUrl(item.img_url)" alt="" />
                    </figure>
                    <h2 v-text="item.name"></h2>
                </li>
            </ul>
        </div>
        <div class="scroll-status">
            <span v-show="loadmore == 'loading'">loading</span>
            <span v-show="loadmore == 'nomore'">all product had loaded</span>
            <span v-show="loadmore == 'waiting'">scroll to bottom load more</span>
        </div>
    </UxDialog>
</template>

<script>
export default {
    name: "ProduceSelectDialog",
    props: ["value"],
    data () {
        return {
            loading: false,
            loadmore: "",
            form: { page_size: 20, page_num: 1 },
            products: [],
        };
    },
    methods: {
        onShow () {
            this.products.length == 0 && this.getProducts();
        },

        onClose () {
            this.$emit("input", null);
        },

        // 滚动
        onScroll (event) {
            if (this.loading != "nomore") {
                let elem = event.target;
                let offset = 100;
                let scrollHeight = elem.scrollHeight;
                let scrollTop = elem.scrollTop;
                let clientHeight = elem.innerHeight || elem.clientHeight;

                if (scrollHeight - clientHeight - scrollTop < offset) {
                    if (this.loading == "waiting") {
                        this.loading = "loading";
                        this.form.page_size += 1;
                        this.getProducts();
                    }
                }
            }
        },

        async getProducts () {
            this.loading = true;

            let request = {
                page_size: this.form.page_size,
                page_num: this.form.page_num,
            };
            let response = await this.$http("Product.getList", request);

            if (response.code === 0) {
                this.loading = false;

                (response.data || []).map((item) => {
                    this.products.push(item);
                });

                this.loading = false;
                this.form.total = response.total;
                this.loadmore =
                    this.products.length >= this.form.total
                        ? "nomore"
                        : "waiting";
            } else {
                this.loading = false;
                this.$uxMessage.error("get products failed, please try again");
            }
        },

        // 选中跳转
        selectItem (item) {
            this.$router.push("/designer?pid=" + item.spu);
        },
    },
};
</script>

<style lang="scss" scoped>
.scroll-list {
    width: 800px;
    padding: 24px;
    min-height: 540px;
    ul {
        display: flex;
        flex-wrap: wrap;
    }
    li {
        cursor: pointer;
        width: 25%;
        box-sizing: border-box;
        padding: 16px;
        padding-bottom: 10px;
        figure {
            display: block;
            padding-bottom: 120%;
            position: relative;
            background: #f2f2f2;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
            img {
                position: absolute;
                left: 0;
                left: 50%;
                transform: translateX(-50%);
                height: 100%;
            }
        }
        h2 {
            margin-top: 8px;
            line-height: 24px;
            font-size: 14px;
            font-weight: normal;
        }
    }
}

.scroll-status {
    padding: 24px;
    text-align: center;
    line-height: 50px;
    text-align: center;
    font-size: 14px;

    color: #666666;
}
</style>
